<template>
  <div class="list">
    <!-- <Dashboard :uppy="uppy" /> -->
    <div class="top">
      <!-- action="/dev-api/common/uploadMinio" -->
      <!-- <el-upload
        class="upload-demo"
        action="/dev-api/common/uploadMinio"
        ref="upload"
        :on-remove="handleRemove"
        :on-change="handleFileChange"
        :file-list="uploadFileList"
        multiple
        :limit="3"
        :show-file-list="false"
        :on-success="uploadSuccess"
        method="post"
      >
        
      </el-upload> -->
      <div>
        <el-button type="primary" round @click="showDashboard">上传</el-button>
        <!-- <button @click="open = true">Show Dashboard</button> -->
        <DashboardModal
          :uppy="uppy2"
          :open="open"
          :props="{
            onRequestCloseModal: handleClose,
          }"
        />
      </div>

      <div ref="uppyContainer"></div>
      <el-button type="success" round class="download">下载</el-button>
      <el-button type="info" round class="download">分享</el-button>
      <el-button type="warning" round class="transfer" @click="transfer"
        >传输列表</el-button
      >
    </div>
    <div class="table">
      <el-table
        ref="multipleTableRef"
        :data="file"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column label="文件名">
          <template #default="scope">
            <svg-icon
              v-if="
                whatFile(scope.row.fileName) === 'xls' ||
                whatFile(scope.row.fileName) === 'xlsx'
              "
              icon-class="excel2"
              class-name="excel2-class icon"
              @click="preview(scope.row.url, scope.row.type)"
            />
            <svg-icon
              v-else-if="
                whatFile(scope.row.fileName) === 'doc' ||
                whatFile(scope.row.fileName) === 'docx'
              "
              icon-class="word"
              class-name="word-class icon"
              @click="preview(scope.row.url, scope.row.type)"
            />
            <svg-icon
              v-else-if="whatFile(scope.row.fileName) === 'pdf'"
              icon-class="pdf2"
              class-name="pdf2-class icon"
              @click="preview(scope.row.url, scope.row.type)"
            />
            <svg-icon
              v-else-if="whatFile(scope.row.fileName) === 'folder'"
              icon-class="folder"
              class-name="folder-class icon"
              @click="preview(scope.row.url, scope.row.type, scope.row.path)"
            />
            <svg-icon
              v-else-if="
                whatFile(scope.row.fileName) === 'ppt' ||
                whatFile(scope.row.fileName) === 'pptx'
              "
              icon-class="ppt"
              class-name="ppt-class icon"
              @click="preview(scope.row.url, scope.row.type)"
            />
            <svg-icon
              v-else-if="whatFile(scope.row.fileName) === 'png'"
              icon-class="png"
              class-name="png-class icon"
              @click="preview(scope.row.url, scope.row.type)"
            />
            <svg-icon
              v-else-if="
                whatFile(scope.row.fileName) === 'jpg' ||
                whatFile(scope.row.fileName) === 'jpeg'
              "
              icon-class="jpg"
              class-name="jpg-class icon"
              @click="preview(scope.row.url, scope.row.type)"
            />
            <svg-icon
              v-else-if="whatFile(scope.row.fileName) === 'txt'"
              icon-class="txt"
              class-name="txt-class icon"
              @click="preview(scope.row.url, scope.row.type)"
            />
            <svg-icon
              v-else-if="whatFile(scope.row.fileName) === 'zip'"
              icon-class="zip3"
              class-name="zip-class icon"
              @click="preview(scope.row.url, scope.row.type)"
            />
            <svg-icon
              v-else
              icon-class="unknown2"
              class-name="unknown-class icon"
              @click="preview(scope.row.url, scope.row.type)"
            />
            <span
              class="text"
              @click="preview(scope.row.url, scope.row.type, scope.row.path)"
            >
              {{ scope.row.fileName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="日期">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column label="大小">
          <template #default="scope">{{ scope.row.size }}</template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { Base64 } from "js-base64";
import { ElTable } from "element-plus";
import { storeToRefs } from "pinia";
import useConstantsStore from "@/store/modules/constants";
import useFileStore from "@/store/modules/file";
import { ElMessage } from "element-plus";

// uppy
import { Dashboard, DashboardModal, DragDrop, ProgressBar } from "@uppy/vue";
import Uppy from "@uppy/core";
import Tus from "@uppy/tus";
const open = ref(false);

onMounted(() => {
  const uppy2 = new Uppy({
    id: "uppy2",
    autoProceed: true,
    debug: true,
  });
});

const handleClose = () => {
  open.value = false;
};
const showDashboard = () => {
  open.value = true;
};
const constantsStore = useConstantsStore();
const { MINIO_URL } = storeToRefs(constantsStore);
const fileStore = useFileStore();
const { file, isShow, uploadFileList } = storeToRefs(fileStore);
// 初始化文件列表
fileStore.getFileLists();
// 判断是什么文件
const whatFile = (fileName) => {
  if (fileName.lastIndexOf(".") === -1) {
    return "folder";
  }
  return fileName.substring(fileName.lastIndexOf(".") + 1);
};
// 预览
const preview = (url, type, path = "") => {
  if (type === "1") {
    window.open(
      MINIO_URL.value +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url))
    );
  } else {
    fileStore.getFileLists(path);
  }
};
// 上传成功后
const uploadSuccess = () => {
  fileStore.getFileLists();
  // clearFiles();
  ElMessage("上传成功");
};
// 显示传输列表
const transfer = () => {
  isShow.value = true;
};
</script>

<style scoped>
.drawer {
  display: flex;
}
.top {
  display: flex;
  align-items: center;
  margin: 10px 10px 5px 10px;
  .upload-demo {
    padding-right: 5px;
  }
  .transfer {
    /* 让按钮靠右显示 */
    margin-left: auto;
    margin-right: 10px;
  }
}
.table {
  display: flex;
  justify-content: center;
  flex: 1;
  align-items: center;
}
.icon {
  width: 28px;
  height: 28px;
  position: relative;
}
.text {
  margin-left: 5px;
  position: absolute;
  bottom: 13px;
}
</style>
